import React from 'react'
import { useQuery } from 'react-query'
import { useAppSelector } from './store/hooks'
import { selectCount } from './store/counterSlice'

export default function GithubQuery() {
  const countRedux = useAppSelector(selectCount)
  const { isLoading, error, data } = useQuery<any, Error>('repoData', () =>
    fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
      res.json()
    )
  )

  if (isLoading) return <p>'Loading...'</p>

  if (error) return <p>'An error has occurred: ' + error.message</p>

  return (
    <div>
      <h1>{data.name} == {countRedux}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  )
}
